﻿@model smp.ButterflyCakes.Models.FormModels.Order.ComponentFinishingModel

<div class="container">
    <div class="container-fluid">
        @if (ViewBag.Error != null)
        {
            <div class="alert alert-block alert-error">
                <p>@ViewBag.Error</p>
            </div>
        }
        @Html.ValidationSummary(true)
    </div>
    <form class="form-horizontal" id="editform" url="/order/savefinish">
        @Html.HiddenFor(x => x.OrderId)
        @Html.HiddenFor(x => x.ComponentId)
        @if(Model.IsFruit)
        {
            <div class="form-actions">
                <strong>Please note, Marzipan is used to cover all fruit cakes</strong>
            </div>
        }
        <div class="control-group">
            <label class="control-label" for="CoveringType">
                Covering Type</label>
            <div class="controls">
                @MvcHtmlString.Create(Model.SelectCoveringType.Html)
                @Html.ValidationMessageFor(x => x.CoveringType)
            </div>
        </div>
        
        <div id="colourContainer" class="control-group hide">
            <label class="control-label" for="FinishColour">
                Colour</label>
            <div class="controls">
                @Html.HiddenFor(x => x.FinishColour)
                <div>
                    <div id="selectedColour" style="height: 50px; width: 200px; background: @Model.FinishColour">
                        <p id="noColour">
                            None</p>
                    </div>
                    <a id="pickColour" type="button" class="btn btn-info">
                        Toggle Colour Wheel</a>
                </div>
                <div id="colourPickerContainer" class="hide">
                </div>

            </div>
        </div>
        
        <div id="finishContainer" class="control-group hide">
            <label class="control-label" for="FinishType">
                Finish Type</label>
            <div class="controls">
                @MvcHtmlString.Create(Model.SelectFinishingType.Html)
                @Html.ValidationMessageFor(x => x.FinishType)
            </div>
        </div>
    </form>
    <div class="form-actions">
        <button id="save" type="submit" class="btn btn-success">
            Next
        </button>
        <button id="cancel" type="submit" class="btn btn-danger hide">
            Cancel
        </button>
    </div>
</div>

<script type="text/javascript">

    var wheelActive = false;

    function LoadColourPick() {
        var cw = Raphael.colorwheel($('#colourPickerContainer'), 250);
        if ($('#ButterCreamColour').val() != NaN) {
            cw.color($('#colourPickerContainer').val());
        }
        cw.onchange(function (colour) {
            $('#selectedColour').css('background', colour.hex);
            $('#ButterCreamColour').val(colour.hex);
            $('#noColour').text('');
        });
    }

    function ToggleColour() {
        
    }

    $(document).ready(function () {

        $('#CoveringType').change(function () {
            
            if ($('#CoveringType').val() == 1) {
                $('#finishContainer').slideDown(500);
            } else if($('#CoveringType').val() == 4) {
                $('#finishContainer').slideDown(500);
                $('#colourContainer').slideDown(500);
            } else {
                $('#finishContainer').slideUp(250);
                $('#colourContainer').slideUp(250);
            }
        });

        $('#pickColour').click(function (e) {
            e.preventDefault();
            if (wheelActive) {
                $('#colourPickerContainer').slideUp(250);
                wheelActive = false;
            } else {
                $('#colourPickerContainer').slideDown(500);
                wheelActive = true;
            }
        });

        LoadColourPick();
    });

</script>